<template>
<el-upload class="avatar-uploader"
:action="action"
:show-file-list="false"
  :on-success="handleAvatarSuccess"
  name="img"
:limit="lim" >
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>

<script>
import config from "@/config.js"
export default {
    name: '',
    props: {
        url: String, //回显
        limit: Number, //最多传几张图片
        cb: Function, //获取图片的钩子
        index: Number, //辨别哪个规格的图片
    },
    data() {
        return {
            lim: 1,
            action: config.baseURL + "api/savePic", //图片上传接口
            imageUrl: ''
        }
    },
    components: {},
    methods: {
         handleAvatarSuccess(res, file) {
             if(res.code!=2000){
                 this.$message.error("图片上传失败！");return;
             }
             this.imageUrl = config.baseURL+res.data;
             this.$emit("cb",this.imageUrl);
      },
        // handleRemove(file, fileList) {
        //     let res = [];
        //     var _this = this;
        //     fileList.map((e, i) => {
        //         res.push({ //向父组件传这样的数据格式
        //             status: e.status,
        //             name: e.name,
        //             size: e.size,
        //             uid: e.uid,
        //             file: e.raw,
        //             url: (e.response && e.response.data) ? config.baseURL + e.response.data : _this.fileList[i].url, // e.response.data上传图片， _this.fileList[i].url：回显图片
        //             code: e.code
        //         })
        //     })
        //     res.push(this.index);
        //     this.$emit("cb", res)
        // },
        // handlePreview(file) {},
        // handleSuccess(response, file, fileList) {
        //     let res = [];
        //     var _this = this;
        //     fileList.map((e, i) => {
        //         res.push({ //向父组件传这样的数据格式
        //             status: e.status,
        //             name: e.name,
        //             size: e.size,
        //             uid: e.uid,
        //             file: e.raw,
        //             url: (e.response && e.response.data) ? config.baseURL + e.response.data : _this.fileList[i].url,
        //             code: e.code
        //         })
        //     })
        //     res.push(this.index);
        //     this.$emit("cb", res)
        // },
        // handleExceed(files, fileList) {}
    },
    watch: {
        // url: {
        //     handler(val) {
        //         if (!val || !val.length) {
        //             return;
        //         }
        //         if (!Array.isArray(val)) {
        //             val = val.replace(/\"/g, ""); //解决后端图片地址不规范："["url"]" ""url""
        //             val = val.replace(/\[/g, "");
        //             val = val.replace(/\]/g, "");
        //             val = val.replace(/\\/g, "");
        //             val = val.split(",");
        //         }

        //         val = val.map(e => { //解决相对图片路径问题
        //             if (/http/.test(e)) return e;
        //             return e = config.baseURL + e;
        //         });
        //         this.fileList = val.map(e => ({ //显示name和图片
        //             name: e,
        //             url: e
        //         }));
        //     },
        //     immediate: true
        // },
        url:{
            handler(val){
                this.imageUrl=val;
            },
            immediate:true
        },
        limit: {
            handler(val) {
                if (!val && val < 1) {
                    return;
                }
                this.lim = parseInt(val);
            },
            immediate: true
        }
    },
    computed: {},
    created() {},
    mounted() {},
}
</script>

<style lang="less">
@size: 100px;

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: @size;
    height: @size;
    line-height: @size;
    text-align: center;
}

.avatar {
    width: @size;
    height: @size;
    display: block;
}
</style>
